<template>
  <a-modal
    title="绩效数据采集"
    :width="'60%'"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    :closable="false"
    :maskClosable="false"
    :keyboard="false"
    :cancelButtonProps="style">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-table
          :columns="columns"
          size="small"
          bordered
          :dataSource="dataSource"
          :pagination="false"
          :scroll="{y:500}"
        >
          <template slot="dataValue" slot-scope="text,record" >
            <!--数据获取类型为填报-->
            <template v-if="record.dataAcquisitionType == 1">
              <!--填报类型为null-->
              <template v-if="null == record.inputType">
                <!--数据类型为定性-->
                <a-input v-if="record.dataType == 1" v-model="record.dataValue"></a-input>
                <!--数据类型为定量-->
                <a-input-number :min="0"  v-if="record.dataType == 0" v-model="record.dataValue"></a-input-number>
              </template>
              <!--存在填报类型-->
              <template v-else>
                <!--定性文本域-->
                <a-textarea v-if="record.inputType.isTextArea == '0'"
                            :placeholder="record.inputType.isRequired == '0'?'必须大于'+record.inputType.wordCount+'个字符':''" v-model="record.dataValue" ></a-textarea>
                <!--定性非文本域-->
                <a-input v-else-if="record.inputType.isTextArea == '1' && record.dataType == 1"
                         :placeholder="record.inputType.isRequired == '0'?'必须大于'+record.inputType.wordCount+'个字符':''" v-model="record.dataValue" ></a-input>
                <!--定量-->
                <a-input-number v-else-if="record.inputType.isTextArea == '1' && record.dataType == 0" v-model="record.dataValue" ></a-input-number>
              </template>
            </template>
            <!--数据获取类型为采集-->
            <template v-else>
              <span>{{text}}</span>
            </template>
          </template>
        </a-table>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import { httpAction, getAction,postAction,putAction } from '@/api/manage'
  export default {
    name: 'PerformanceAppraisalPage',
    components: {},
    data() {
      return {
        title: '绩效数据采集',
        visible: false,
        model: {},
        style: { style: { display: 'none' } },
        performanceAppraisalId: '',
        actualValueInput: '',
        isShowTableRow: false,
        actualList: [],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        internalId: '',//科目id
        projectId: '',//项目id
        budgetAccountId: '',//账套id
        tableId: '',
        validatorRules: {},
        columns: [
          {
            title: '绩效目标名称',
            align: 'center',
            dataIndex: 'targetName',
            customRender: (value, row, index) => {
              console.log(value,'绩效目标名称')
              const obj = {
                children: value,
                attrs: {
                  rowSpan :parseInt(row.rowSpanOne)
                },
              };
              return obj;
            },
          },
          {
            title: '数据获取方式',
            align: 'center',
            dataIndex: 'dataAcquisitionType',
            customRender: (value, row, index) =>{
              console.log(value,'数据采集方式')
              const obj = {
                children: value == '0'?'采集':'填报',
                attrs: {
                  rowSpan:parseInt(row.rowSpanTwo)
                },
              };
              return obj;
            }
          },
          {
            title: '绩效数据名称',
            align: 'center',
            dataIndex: 'variableName',
            width:120,
            customRender: function(t, r, index) {
              //绩效数据名称(判断必填样式)
              if(null != r.inputType){
                if (r.inputType.isRequired == '0') {
                  // <span style = 'color:red' >
                  return <span>{t}<span style = 'color:#f5222d'>* </span></span>
                } else {
                  return t;
                }
              } else {
                return t;
              }
            }
          },
          {
            title: '预计目标',
            align: 'left',
            width:120,
            dataIndex: 'expectedValue',
          },
          {
            title: '绩效数据',
            align: 'center',
            dataIndex: 'dataValue',
            scopedSlots: { customRender: 'dataValue' },
          },

        ],
        dataSource: [],
        url: {
          add: '/performance/performanceAppraisal/add',
          edit: '/performance/performanceAppraisal/edit',
          createAppraisal: '/performance/performanceAppraisal/createAppraisal',
          list: '/performance/performanceAppraisal/getAppraisalList1',
          list1: '/performance/performanceAppraisal/getAppraisalList2',
          completeEdit: '/performance/performanceAppraisalComplete/editBatch',
          getRecord: '/performance/performanceVariableRecord/getCollectValue',
          saveOrUpdateRecord: '/performance/performanceVariableRecord/saveOrUpdateRecord',
          saveRecords: '/performance/performanceVariableRecord/saveRecords'
        }
      }
    },
    created() {
    },
    methods: {
      /**
       * @author pqz
       * @description 校验input属性
       */
      checkInputType(){
        let flag = true
        for (let item of this.dataSource) {
          //存在输入属性，且填报框为必填，且最小满足字数不为零
          if (null != item.inputType &&  '0' == item.inputType.isRequired && '0' != item.inputType.wordCount ){
            if(null == item.dataValue || '' == item.dataValue){
              this.$message.warning("请填报“"+item.variableName+"”绩效数据值")
              flag = false
              return false;
            }
            if (item.dataValue.length<item.inputType.wordCount) {
              this.$message.warning("“"+item.variableName+'”不能少于'+item.inputType.wordCount+'个字符');
              flag = false
              return false;
            }
          }
        }
        return flag
      },

      /**
       * @author pqz
       * @description 批量保存指标值记录
       */
      saveRecords(){
        if (this.checkInputType()){
          let list = []
          this.dataSource.map((item)=>{
            if (1 == item.dataAcquisitionType && null != item.dataValue) {
              list.push({
                performanceTargetId:item.performanceTargetId,
                performanceVariableId:item.performanceVariableId,
                //支出主表
                dataTable:'expenditure_reimb_info',
                dataTableId:this.tableId,
                dataValue:item.dataValue
              })
            }
          })
          postAction(this.url.saveRecords,list).then((res)=>{})
          this.$emit('submitf')
          this.close()
        }

      },
      add() {
        this.edit({})},

      /**
       * @author pqz
       * @description 主方法入口
       * @param record
       */
      edit(record) {
        // this.projectId = record.projectId
        this.tableId = record.tableId
        let params = {
          mainId: record.internalId,
          dataTable:'expenditure_reimb_info',
          dataTableId: record.tableId
        }
        getAction(this.url.getRecord, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result
            console.log(this.dataSource,'this.dataSource')
            if (this.dataSource.length>0){
              //调整为如果存在数据进行弹框没有直接提交
              this.visible = true
              this.dataSource.map((item)=>{
                if (null != item.inputType){
                  item.inputType = JSON.parse(item.inputType)
                }
              })
            }else {
              this.visible = false
              this.$emit('submitf')
            }
          } else {
            this.$message.warning('数据采集失败')

          }
        })
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleOk() {
        this.saveRecords()

      },
      handleCancel() {
        this.close()
      },




    }
  }
</script>

<style scoped lang="less">
  .btn_none {
    .ant-modal-footer {
      display: none;
    }
  }
  /deep/ .ant-input-number {
    -ms-flex: 1;
    flex: 1;
    width: 100%;
  }
  /deep/ .ant-modal-footer {
    padding: 4px 16px !important;
  }
  /deep/ .ant-modal-header {
    padding: 9px 24px !important;
  }
  /deep/ .ant-modal-body {
    padding: 3px !important;
  }
</style>